<template>
	<div class="comment">
		<div class="notice_type clear">
			<div class="notice_type_check fl" v-if="!user_multistage" v-show="commentList.length > 0">
				<div class="notice_type_check_1">
					<el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="notice_e">
						<i class="new_icn bianji" @click="changeShow"></i>
					</el-tooltip>
					<div class="box" :class="{'notice_m': isActive}">
						<el-tooltip class="item" effect="dark" content="全选" placement="top-start">
							<span>
								<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
							</span>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
							<span class="new_icn dele_1" @click="removeList()"></span>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="已读" placement="top-start">
							<span class="new_icn Shape" @click="readList()"></span>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="返回" placement="top-start">
							<span class="new_icn left_1" @click="changeHide"></span>
						</el-tooltip>
					</div>
					<el-tooltip class="item" effect="dark" content="设置" placement="top-start">
						<i class="new_icn Shape3" @click="setNewsMessagee()"></i>
					</el-tooltip>
				</div>
			</div>
			<div class="notice_type_op fr">
				<template v-for="item of newbadge">
					<label v-if="item.type == 4">
						<i v-show="item.num != 0">{{item.num}}</i>
						<input type="radio" checked name="type2">
						<span @click="bindCommentStatus(4)">我收到的</span>
					</label>
					<label v-if="item.type == 5">
						<i v-show="item.num != 0">{{item.num}}</i>
						<input type="radio" name="type2">
						<span @click="bindCommentStatus(5)">我发起的</span>
					</label>
				</template>
			</div>
		</div>
		<ul class="mesg_list">
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<template v-for="(item ,inx) of commentList">
					<li class="noticeLs clear" :key="inx">
						<span class="box fl" v-if="isCheckbox">
							<el-checkbox :label="item"></el-checkbox>
						</span>
						<div class="noticeLs_r" :class="{'isWidth': isWidth}">
							<div class="noticeLs_1 clear">
								<el-badge v-if="!parseInt(item.is_read)" is-dot class="item"></el-badge>
								<span>{{item.username}} 【 {{item.content_type ? item.content_type : item.title}} 】 {{item.name}} </span>
								<div class="noticeLs_1_operation fr">
									<button type="text" @click="markedRead(item)" v-if="!parseInt(item.is_read)">标记已读</button>
									<button type="text" @click="checkLook(inx, item)">查看</button>
								</div>
							</div>
							<div class="noticeLs_2">
								<span>{{item.username}}</span>
								<span>{{item.create_time.substring(5,16)}}</span>
							</div>
							<div class="noticeLs_3" v-html='item.content'></div>
						</div>
					</li>
				</template>
			</el-checkbox-group>
		</ul>
		<el-dialog title="消息自动删除设置" :visible.sync="newsVisible" width="400px" custom-class="del_new" :close-on-click-modal="false">
			<el-radio-group v-model="del_days">
				<el-radio :label="0">不自动删除</el-radio>
				<el-radio :label="30">自动删除30天前的已读消息（置顶除外）</el-radio>
				<el-radio :label="15">自动删除15天前的已读消息（置顶除外）</el-radio>
				<el-radio :label="7">自动删除7天前的已读消息（置顶除外）</el-radio>
			</el-radio-group>
			<div class="buttonCSS">
				<el-button type="primary" @click="messageSet">确定</el-button>
			</div>
		</el-dialog>
		<el-pagination v-if="total_number > listCommentParam.page_size" @current-change="changePage" :current-page="listCommentParam.page_index" :page-size="listCommentParam.page_size" layout="prev, pager, next" :total="total_number">
		</el-pagination>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			listCommentParam: {
				user_id: this.$g.user_id,
				data_type: 1,
				page_size: 5,
				page_index: 1,
				type: 4
			},
			total_number: 0,
			commentList: [],
			placeholder: false,

			checkAll: false,
			checkedCities: [],
			isIndeterminate: false,

			notice_e: true,
			isActive: false,
			isCheckbox: false,
			isWidth: false,

			newsVisible: false,
			del_days: 0,
			user_multistage: this.$store.state.userInfo.is_level,
			newbadge: this.$store.state.badge ? this.$store.state.badge : []
		}
	},
	created() {
		this.getCommentList();
	},
	computed: {
		/*监控未读消息数量*/
		Badge() {
			return this.$store.state.badge;
		},
		commentLength() {
			return this.commentList.length
		}
	},
	watch: {
		'$store.state.badge': {
			handler(val, newval) {
				this.newbadge = this.$store.state.badge
			},
			immediate: true
		},
		"checkedCities": {
			handler(newVal, oldVal) {
				this.checkAll = newVal.length == this.commentLength
			}
		}
	},
	methods: {
		/*
		标记已读
		 */
		markedRead(obj) {
			this.checkedCities = []
			let success = (res => {
				this.$store.commit('SET_NEWBADGE', new Date())
				this.$message.success(res.msg)
				this.getCommentList();
			})
			this.$ajax({
				url: 'api/message/set_read',
				method: 'post',
				data: {
					type: 4,
					id: [obj.id]
				},
				func: { success: success }
			})
		},
		/**
		 * 修改消息自动删除设置
		 */
		setNewsMessagee() {
			this.newsVisible = true;

			let success = (res => {
				this.del_days = parseInt(res.data.del_days)
			});
			this.$ajax({
				url: 'api/message/message_set',
				method: 'get',
				params: {},
				func: { success: success }
			})
		},
		messageSet() {

			this.$confirm('是否设置消息自动删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them'
			}).then(() => {

				let success = (res => {
					this.newsVisible = false;
					this.checkedCities = [];
					this.$message.success(res.msg)
					this.getCommentList();
					this.$store.commit('SET_NEWBADGE', new Date())
				})
				this.$ajax({
					url: 'api/message/message_set',
					method: 'post',
					data: {
						del_days: this.del_days
					},
					func: { success: success }
				})
			}).catch(() => { this.newsVisible = false });
		},
		readList() {
			if (this.checkedCities.length == 0) {
				this.$message.error('请勾选消息');
				return
			};
			let idArr = [];
			for (var i = 0; i < this.checkedCities.length; i++) {
				if (this.checkedCities[i].id) {
					idArr.push(this.checkedCities[i].id)
				}
			}
			this.$confirm('是否标为已读?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them'
			}).then(() => {

				let success = (res => {
					this.$message.success(res.msg);
					this.newsVisible = false;
					this.checkedCities = [];
					this.getCommentList();
					this.$store.commit('SET_NEWBADGE', new Date())
				})
				this.$ajax({
					url: 'api/message/set_read',
					method: 'post',
					data: {
						type: 4,
						id: idArr
					},
					func: { success: success }
				})
			}).catch(() => {});
		},
		removeList() {
			if (this.checkedCities.length == 0) {
				this.$message.error('请勾选消息');
				return
			};
			let idArr = [];
			for (var i = 0; i < this.checkedCities.length; i++) {
				if (this.checkedCities[i].id) {
					idArr.push(this.checkedCities[i].id)
				}
			}
			this.$confirm('是否删除选择的消息?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them'
			}).then(() => {

				let success = (res => {
					this.checkAll = false
					this.$message.success(res.msg)
					this.listCommentParam.page_index = 1;
					this.getCommentList();

					this.$store.commit('SET_NEWBADGE', new Date())
				})
				this.$ajax({
					url: 'api/message/set_delete',
					method: 'delete',
					params: {
						type: 4,
						id: idArr
					},
					func: { success: success }
				})
			}).catch(() => {});
		},
		changeShow() {
			this.isActive = true
			this.notice_e = false
			this.isCheckbox = true
			this.isWidth = true
		},
		changeHide() {
			this.isActive = false
			this.notice_e = true
			this.isCheckbox = false
			this.isWidth = false
		},
		handleCheckAllChange(val) {
			this.checkedCities = val ? this.commentList : [];
			this.isIndeterminate = false;
		},
		handleCheckedCitiesChange(value) {

			let checkedCount = value.length;
			this.checkAll = checkedCount === this.commentList.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.commentList.length;
		},
		//分页改变
		changePage(val) {
			this.listCommentParam.page_index = val;
			this.checkAll = false;
			this.getCommentList();
		},

		getCommentList() {
			let success = (data => {
				this.commentList = data.data.data;
				this.total_number = data.data.data_sum;

				this.commentList.length === 0 ?
					this.placeholder = true :
					this.placeholder = false
			})
			this.$ajax.get('api/message/message_user', { params: this.listCommentParam, func: { success: success } })
		},

		bindCommentStatus(status) {

			this.resetCommentParam();
			this.listCommentParam.page_index = 1;
			this.listCommentParam.type = status;
			this.getCommentList();
		},
		resetCommentParam() {
			this.listCommentParam.page_size = 5;
			this.listCommentParam.page_index = 1;
		},
		checkLook(inx, item) {
			this.$store.commit('SET_NEWBADGE', new Date())
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')

			let CheckSchoolAppCode =  sessionStorage.getItem( 'CheckSchoolAppCode' )
			let AppCode = null
			if (CheckSchoolAppCode != '') {
				AppCode = `&CheckSchoolAppCode=${CheckSchoolAppCode}`
			}
			let link = ''

			if (this.commentList[inx].is_read === 0) {
				let success = (data => {
					this.commentList[inx].is_read = 1;
					this.getCommentList()
				})
				this.$ajax.post('api/message/set_read', { id: item.id, type: 4 }, { func: { success: success } })
			}

			if (this.commentList[inx].module === 'video') {
				link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${this.commentList[inx].content_id}`
				window.open(link)
			} else if (this.commentList[inx].module === 'resource') {
				link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/resourceDetail&id=${this.commentList[inx].content_id}`
				window.open(link)
			} else if (this.commentList[inx].module === 'eva') {
				link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/netteach/details&id=${this.commentList[inx].content_id}${AppCode}`
				window.open(link)
			}


		},

	}
}
</script>